<template>
    <div>
        <flexbox align="flex-start" v-loading="loading" style="width: 100%; position: relative">
            <div style="flex: 1; border-right: 1px solid #ccc" v-empty="!isEmpty">
                <div v-if="list.length">
                    <div class="abnormal">
                        <div v-for="(elem, index) of list" :key="index" class="list-item" @click="showDetail(elem.id)">
                            <div class="font-w-b">
                                <span>【{{ elem.systemName }}】</span>
                                <span v-html="brightenKeyword(elem.requireName, keyword)"></span>
                            </div>
                            <flexbox align="flex-end" class="margin-l-8" style="font-size: 12px">
                                <a-tag color="blue" class="margin-r-16" v-if="elem.systemTags">{{ elem.systemTags }}</a-tag>
                                <span class="disable-font-color">上线日期：{{ $filters.dateFilter(elem.onlineTime) }}</span>
                            </flexbox>
                        </div>
                    </div>
                    <flexbox justify="center">
                        <a-pagination
                            v-model:current="current"
                            v-model:pageSize="pageSize"
                            :total="total"
                            show-size-changer
                            @showSizeChange="onShowSizeChange"
                            @change="handleChange"
                        />
                    </flexbox>
                </div>
            </div>
            <div style="width: 30%; min-width: 300px; padding: 0 32px">
                <a-form layout="vertical" :model="form">
                    <a-form-item label="创建人">
                        <h-search-select-cell type="allUser" label="name" allowClear @success="handleSelectChange($event, 'createUserEmpId')">
                            <template #label="{ record }"> {{ record.name }}（{{ record.empId }}） </template>
                        </h-search-select-cell>
                    </a-form-item>
                </a-form>
            </div>
        </flexbox>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { HSearchSelectCell } from '@/components';
import { useRouter } from 'vue-router';
import { defineComponent, ref, unref, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    components: {
        HSearchSelectCell
    },
    props: {
        keyword: {
            type: String,
            default: ''
        }
    },
    setup(props) {
        const router = useRouter();
        const state = reactive<any>({
            loading: false,
            isEmpty: false,
            total: 0,
            current: 1,
            pageSize: 20,
            list: [],
            form: {
                createUserEmpId: null
            }
        });
        const brightenKeyword = (val, keyword) => {
            const Reg = new RegExp(keyword, 'i');
            if (val) {
                return val.replace(Reg, `<span class="primary-color">${keyword}</span>`);
            }
        };
        const onShowSizeChange = (current: number, pageSize: number) => {
            state.current = current;
            state.pageSize = pageSize;
            getList();
        };
        const handleChange = (page, pageSize) => {
            getList();
        };
        // 通用选择回调
        const handleSelectChange = (val, field: string) => {
            switch (field) {
                case 'createUserEmpId':
                    state.form.createUserEmpId = val.empId || null;
                    break;
                default:
                    state.form.createUserEmpId = null;
            }
            getList();
        };
        const showDetail = (id) => {
            router.push({
                path: '/tool/fuyongku/proDetail',
                query: {
                    id
                }
            });
        };
        const getList = async () => {
            state.isEmpty = false;
            state.loading = true;
            const query = {
                selectType: 'reuse',
                requireName: props.keyword,
                pageSize: state.pageSize,
                pageNum: state.current,
                ...state.form
            };
            const { success, moule, totalCount } = await api.productRequireModel.selectPage(query);
            if (success) {
                state.list = [...moule];
                state.total = totalCount;
                state.isEmpty = !moule.length;
            }
            state.loading = false;
        };
        getList();
        watch(
            () => props.keyword,
            (n) => {
                getList();
            }
        );
        return {
            ...toRefs(state),
            brightenKeyword,
            onShowSizeChange,
            handleChange,
            showDetail,
            handleSelectChange
        };
    }
});
</script>

<style scoped lang="less">
.abnormal {
    height: calc(100vh - 304px);
    overflow-y: auto;
}
.list-item {
    margin-bottom: 12px;
    cursor: pointer;
}
</style>